<!-- Nested node template -->
<script type="text/ng-template" id="nodes_renderer.html">
  <div  class="tree-node tree-node-content" data-nodrag>
    <a class="btn btn-success btn-xs" ng-if="node.nodes && node.nodes.length > 0" data-nodrag ng-click="toggle(this)"><span
        class="glyphicon"

        ng-class="{
          'glyphicon-chevron-right': collapsed,
          'glyphicon-chevron-down': !collapsed
        }"></span></a>
    {{node.title}}
  </div>
  <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" data-nodrag>
    <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'" data-nodrag>
    </li>
  </ol>
</script>

<!--<div class="row">
  <div class="col-sm-12">
    <h3>Basic Example</h3>

    <button ng-click="expandAll()">Expand all</button>
    <button ng-click="collapseAll()">Collapse all</button>
  </div>
</div>-->

<div >
  <div >
    <div ui-tree >
      <ol ui-tree-nodes ng-model="data" data-nodrag>
        <li ng-repeat="node in data" ui-tree-node collapsed="true" data-nodrag>
          <div  ng-click="toggle(this);checkThis(node)">
            {{node.title}}
          </div>
          <ol ui-tree-nodes="" ng-model="node.nodes" ng-class="{hidden: collapsed}" collapsed="false" data-nodrag>
            <li ng-repeat="node in node.nodes" ui-tree-node ng-include="'nodes_renderer.html'" data-nodrag>
            </li>
          </ol>
        </li>
      </ol>
    </div>
  </div>

<!--  <div class="col-sm-6">
    <div class="info">
      {{info}}
    </div>
    <pre class="code">{{ data | json }}</pre>
  </div>
</div>-->
